<template>
  <div class="b-action">
    <el-button
      size="small"
      :type="currentMode === 'translate' ? 'primary' : 'default'"
      title="平移"
      plain
      @click="setCurrentMode('translate')"
    >
      <i class="iconfont icon-move"></i>
    </el-button>
    <el-button
      v-if="!activeShallowRef?.name?.includes('editor-point')"
      size="small"
      :type="currentMode === 'rotate' ? 'primary' : 'default'"
      title="旋转"
      plain
      @click="setCurrentMode('rotate')"
    >
      <i class="iconfont icon-rotate"></i>
    </el-button>
    <el-button
      v-if="!activeShallowRef?.name?.includes('editor-point')"
      size="small"
      :type="currentMode === 'scale' ? 'primary' : 'default'"
      title="缩放"
      plain
      @click="setCurrentMode('scale')"
    >
      <i class="iconfont icon-zoom"></i>
    </el-button>
    <el-button
      v-if="activeShallowRef?.name?.includes('editor-point')"
      size="small"
      :type="currentMode === 'createdRoadway' ? 'primary' : 'default'"
      title="绘制巷道"
      plain
      @click="setCurrentMode('createdRoadway')"
    >
      <i class="iconfont icon-huizhixiangdao"></i>
    </el-button>
    <el-button
      v-if="activeShallowRef?.name?.includes('editor-point')"
      size="small"
      :type="currentMode === 'mergedRoadway' ? 'primary' : 'default'"
      title="合并巷道"
      plain
      @click="setCurrentMode('mergedRoadway')"
    >
      <i class="iconfont icon-daduanxiangdao"></i>
    </el-button>
  </div>
</template>
<script setup lang="ts">
import { useActiveObject } from '@renderer/stores/activeObject'
import { useActionMode } from '@renderer/stores/actionMode'
import { watch } from 'vue'
import { CSS2DObject } from 'three/examples/jsm/Addons.js'
import { BufferGeometry, Line, LineBasicMaterial, type Vector3 } from 'three'
import { storeToRefs } from 'pinia'
import { useViewportStore } from '@renderer/stores/viewport'

// 操作模式
const actionModeStore = useActionMode()
const { setCurrentMode } = useActionMode()
const { currentMode } = storeToRefs(actionModeStore)
// 激活的物体
const activeObjectStore = useActiveObject()
const { activeShallowRef } = storeToRefs(activeObjectStore)
// 三维视口
const viewportStore = useViewportStore()
const { scene } = storeToRefs(viewportStore)

let measureObjs: Vector3[] = []
let measurementLabel: CSS2DObject
let line: Line // 连线
watch([activeShallowRef, currentMode], ([active, mode]) => {
  if (mode === 'measure') {
    if (active) {
      measureObjs.push(active.position)
      if (measureObjs.length === 2) {
        const distance = measureObjs[0].distanceTo(measureObjs[1])
        const measurementDiv = document.createElement('div') as HTMLDivElement
        measurementDiv.innerText = `${distance.toFixed(2)}m` // 距离文字 如12.13m
        measurementDiv.style.background = 'black'
        measurementDiv.style.color = 'white'
        measurementLabel = new CSS2DObject(measurementDiv)
        measurementLabel.scale.set(0.04, 0.04, 0.04) // 对标签进行缩放
        measurementLabel.position.lerpVectors(measureObjs[0], measureObjs[1], 0.5) // 将标签放置在线段两端的中点
        line = addLine([measureObjs[0], measureObjs[1]])
        line.add(measurementLabel)
        if (scene.value) {
          scene.value.add(line)
        }
        measureObjs = []
      } else {
        delLine()
      }
    } else {
      delLine()
    }
  } else {
    measureObjs = []
    delLine()
  }
})

function addLine(points: Vector3[]) {
  const lineGeometry = new BufferGeometry().setFromPoints(points)
  const lineMaterial = new LineBasicMaterial({
    color: 0xff5555,
    depthTest: false // 开启深度测试 保证线段不被遮挡
  })
  const line = new Line(lineGeometry, lineMaterial)
  return line
}

function delLine() {
  if (scene.value) {
    scene.value.remove(line)
    measurementLabel?.element.parentNode?.removeChild(measurementLabel.element)
  }
}
</script>
<style lang="scss" scoped>
.b-action {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 10px;
  top: 50px;
  z-index: 8;

  .el-button {
    height: 30px;
    border: none;
    font-size: 18px;
    background: var(--input-background);
    color: var(--base-color);
    border-radius: 0px;

    & + .el-button {
      margin-left: 0;
      border-top: 1px solid var(--base-border);
    }

    &:focus,
    &:hover,
    &.el-button--primary {
      background-color: var(--header-background);
      color: var(--active-color);
    }
  }
}
</style>
